<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>绘图板2</title>
		<style type="text/css">
			.Toolbar{
				width: 253px;
				float: left;
				font-family: "微软雅黑";
				font-size: 14px;
				text-align: center;
				background:#F2f7fe;
				padding: 10px 15px 3px 10px;
				margin-bottom:1px;
				margin-right: 1px;
				border: 1px solid #7b899b;
			}
			img{
				padding: 2px;
				border: 2px solid  #F2F7FE;
			}
			img:hover{
				border: 2px groove #e4f0fe;
				background: white;
			}
			.containerCanvas{
				clear: both;
			}
			canvas{
				border: 1px solid #7b899b;
			}
			button{
				padding: 6px;
				margin: 2px 2px ;
				font-size: 14px;
				background: #F2F7FE;
			}
			#eraser_size{
				display: none;
			}
		</style>
	</head>
	<body>
		<div class="Toolbar">
			-颜色-<br>
			<img id="redPen" src="img/pen_red.gif" />
			<img id="greenPen" src="img/pen_green.gif" />
			<img id="bluePen" src="img/pen_blue.gif" />
			<img id="blackPen" src="img/pen_black.gif" />
		</div>
		<div class="Toolbar">
			-粗细-<br>
			<img id="pen_thin" src="img/pen_thin.gif" />
			<img id="pen_medium" src="img/pen_medium.gif" />
			<img id="pen_thick" src="img/pen_thick.gif" />
		</div>
		<div class="Toolbar">
			-橡皮擦-<br>
			<img id="eraser_thin" src="img/eraser_thin.gif" />
			<img id="eraser_medium" src="img/eraser_medium.gif" />
			<img id="eraser_thick" src="img/eraser_thick.gif" />
		</div>
		<div class="Toolbar">
			-当前状态-<br>
			<img id="pen_color" src="img/pen_red.gif" />
			<img id="pen_size" src="img/pen_thin.gif" />
			<img id="eraser_size" src="img/eraser_thick.gif" />
		</div>
		<div class="containerCanvas">
			<canvas id="canvas" width="1121" height="500"></canvas>
		</div>
		<button id="clear">清除画面</button>
		<button id='save'>保存画面</button>
		
		<script type="text/javascript">
			window.onload = function() {
				var canvas = document.getElementById("canvas");
				var cxt = canvas.getContext("2d");
				var canvasx = canvas.getBoundingClientRect().left;
				var canvasy = canvas.getBoundingClientRect().top;

				canvas.addEventListener('mousedown', downfun);
				canvas.addEventListener('mousemove', movefun);
				canvas.addEventListener('mouseup', upfun);
				var startx;
				var starty;
				var endx;
				var endy;
				var offon = false;
				cxt.lineWidth = 3;
				cxt.lineCap = 'square'

				function downfun(e) {
					offon = true;
					startx = e.clientX - canvasx;
					starty = e.clientY - canvasy;
				}

				function movefun(e) {
					if(offon == true) {
						cxt.beginPath()
						endx = e.clientX - canvasx;
						endy = e.clientY - canvasy;
						cxt.moveTo(startx, starty);
						cxt.lineTo(endx, endy);
						cxt.stroke();

						startx = endx;
						starty = endy;
						console.log("1111");
					}
				}

				function upfun() {
					offon = false;
					cxt.closePath();
				}
				document.getElementById("clear").onclick = function() {
					cxt.clearRect(0, 0, canvas.width, canvas.height);
				}
				document.getElementById('redPen').onclick = function(){
					document.getElementById("pen_color").src ="img/pen_red.gif"
					cxt.strokeStyle = "red"
					document.getElementById("pen_color").style.display = "inline"
					document.getElementById("eraser_size").style.display = "none"
					document.getElementById("pen_size").style.display = "inline"
				}
				document.getElementById('greenPen').onclick = function(){
					cxt.strokeStyle = "greenyellow"
					document.getElementById("pen_color").src ="img/pen_green.gif"
					document.getElementById("pen_color").style.display = "inline"
					document.getElementById("eraser_size").style.display = "none"
					document.getElementById("pen_size").style.display = "inline"
				}
				document.getElementById('bluePen').onclick = function(){
					cxt.strokeStyle = "royalblue"
					document.getElementById("pen_color").src ="img/pen_blue.gif"
					document.getElementById("pen_color").style.display = "inline"
					document.getElementById("eraser_size").style.display = "none"
					document.getElementById("pen_size").style.display = "inline"
				}
				document.getElementById('blackPen').onclick = function(){
					cxt.strokeStyle = "black"
					document.getElementById("pen_color").src ="img/pen_black.gif"
					document.getElementById("pen_color").style.display = "inline"
					document.getElementById("eraser_size").style.display = "none"
					document.getElementById("pen_size").style.display = "inline"
				}
				document.getElementById("pen_thin").onclick = function(){
					cxt.lineWidth = 3;
					document.getElementById("pen_size").src ="img/pen_thin.gif"	
					document.getElementById("pen_color").style.display = "inline"
					document.getElementById("eraser_size").style.display = "none"
					document.getElementById("pen_size").style.display = "inline"
				}
				document.getElementById("pen_medium").onclick = function(){
					cxt.lineWidth = 5;
					document.getElementById("pen_size").src ="img/pen_medium.gif"
					document.getElementById("pen_color").style.display = "inline"
					document.getElementById("eraser_size").style.display = "none"
					document.getElementById("pen_size").style.display = "inline"
				}
				document.getElementById("pen_thick").onclick = function(){
					cxt.lineWidth = 10;
					document.getElementById("pen_size").src ="img/pen_thick.gif"
					document.getElementById("pen_color").style.display = "inline"
					document.getElementById("eraser_size").style.display = "none"
					document.getElementById("pen_size").style.display = "inline"
				}
				document.getElementById("eraser_thin").onclick = function(){
					cxt.strokeStyle = "white"
					document.getElementById("eraser_size").src ="img/eraser_thin.gif"
					document.getElementById("eraser_size").style.display = "inline"
					cxt.lineWidth = 5;
					document.getElementById("pen_color").style.display = "none"
					document.getElementById("pen_size").style.display = "none"
				}
				document.getElementById("eraser_medium").onclick = function(){
					cxt.strokeStyle = "white"
					cxt.lineWidth = 10;
					document.getElementById("eraser_size").src ="img/eraser_medium.gif"
					document.getElementById("eraser_size").style.display = "inline"
					document.getElementById("pen_color").style.display = "none"
					document.getElementById("pen_size").style.display = "none"
				}
				document.getElementById("eraser_thick").onclick = function(){
					cxt.strokeStyle = "white"
					cxt.lineWidth = 20;
					document.getElementById("eraser_size").src ="img/eraser_thick.gif"
					document.getElementById("eraser_size").style.display = "inline"
					document.getElementById("pen_color").style.display = "none"
					document.getElementById("pen_size").style.display = "none"
				}
				document.getElementById("save").onclick = function(){
					var a = document.createElement("a")
					document.body.appendChild(a);
					var url = canvas.toDataURL();
					a.href=url;
					a.download="画板作品"
					a.click()
				}
			}
		</script>
	</body>
</html>
